<template>
  <div class="top">
    <div class="top-left">
      <div style="width: 120px;">查看数据：</div>
      <el-select v-model="selectType" style="width: 100%;">
        <el-option v-for="(item, index) in selectList" :key="item.selectName" :label="item.selectName"
          :value="item.selectName" />
      </el-select>
    </div>
    <el-button type="primary" @click="dataAccessVisible = true"> 数据接入 </el-button>
  </div>
  <div class="main">
    <PureTableBar class="list_hei" title="数据列表">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :pagination="pagination" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <!-- <template #operation="{ row }">
            <el-button type='primary' text @click="copyUrl(row)">
              复制链接
            </el-button>
          </template> -->
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <ReDialog :width="550" :height="220" :models="dataAccessVisible" @Closes="cancelDataAccess()">
    <template #header>
      <h2 style="text-align: center;">数据接入</h2>
    </template>
    <template #main>
      <el-form :model="dataAccessFrom" label-width="100px" label-position="right" style="width: 80%; margin: 0 auto"
        ref="shareFrom" :rules="rule">
        <el-form-item label="接口链接：" prop="url">
          <el-input style="width:65%" v-model="dataAccessFrom.url"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input style="width:65%" v-model.trim="dataAccessFrom.password"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="saveDataAccess(shareFrom)" type="primary" :loading="BtnLoading">保存</el-button>
        <el-button @click="cancelDataAccess()">
          取消
        </el-button>
      </span>
    </template>
  </ReDialog>
</template>
<script setup lang = "ts" >
import { PureTableBar } from "@/components/RePureTableBar";
import { useCommon } from "./hook/dataAccess";
import { ref } from "vue";
const shareFrom = ref();
const {
  dataAccessVisible,
  dataAccessFrom,
  rule,
  selectList,
  selectType,
  loading,
  columns,
  dataList,
  BtnLoading,
  saveDataAccess,
  pagination,
  cancelDataAccess,
  handleSizeChange,
  handleCurrentChange,
} = useCommon()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.main {
  height: calc(100% - 35px);
}

::deep(.el-tabs) {
  height: 99%;
}

:deep(.el-dialog__body) {
  padding: 10px 0;
}

:deep(.el-row) {
  margin-bottom: 10px;
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.el-tabs__content) {
  padding: 5px 15px;
}

:deep(.mt-6) {
  margin: 0;
}

.top {
  display: flex;
  justify-content: space-between;
}

.top-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
